<template>
  <input ref="inputRef2" />
  <hr />
  <ModuleRefChild ref="childRef" />
  <button @click="initSonDataHandler">initData</button>
</template>

<script setup lang="ts">
import { onMounted, ref, useTemplateRef } from 'vue'
import ModuleRefChild from '@/components/ModuleRefChild.vue'
//1.第一种方式 声明ref
// const inputRef = ref<HTMLInputElement | null>(null)
//1.第二种方式vue3.5 声明ref
const inputRef = useTemplateRef<HTMLInputElement>('inputRef2')

// 通过typeof获取到组件对象的类型 然后配合内置的InstanceType得到组件实例类型
type SonInstanceType = InstanceType<typeof ModuleRefChild>
const childRef = ref<SonInstanceType | null>(null)

onMounted(() => {
  // 由于inputRef.value在组件挂载完毕之前都是null
  // 这里需要通过可选链或者类型守卫

  // 可选链
  inputRef.value?.focus()

  // 类型守卫
  /*   if (inputRef.value) {
    console.log(inputRef.value.focus())
  } */
  //  断言
  //  inputRef.value!.focus()
})
const initSonDataHandler = () => {
  childRef.value?.initData()
}
</script>

<style scoped lang="scss"></style>
